 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天记录</title>

<link rel="stylesheet" href="../../../layui.css">
<style>
body .layim-chat-main{height: auto;}
</style>
</head>
<body>

<div id="LAY_page" style="margin: 0 10px;"></div>
<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->


<script src="../../../../layui.js"></script>
<script src="../../../../../js/axios.js"></script>
<script src="../../../../../js/axios_instance.js"></script>
<script>
layui.use(['layim', 'laypage','flow'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,flow=layui.flow
  ,laypage = layui.laypage;

  
  //开始请求聊天记录
  var param =  location.search; //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据

  // 流加载===============
  flow.load({
    elem: '#LAY_view' //指定列表容器
    ,isLazyimg: true// 图片懒加载
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
      var lis = [];

      console.log(page);
      instance({
        method: 'get',
        url: '/layim/chatlog' + param + '&page='+page
      }).then(res => {
        if (res.code != 0){
          return layer.msg(res.msg)
        }
        layui.each(res.data, function(index, item){
          if (item.id == parent.layui.layim.cache().mine.id){
            lis.push("<li class=\"layim-chat-mine\"><div class=\"layim-chat-user\"><img lay-src=\""+item.avatar+"\"><cite><i>"+layui.data.date(item.timestamp)+"</i>"+item.username+"</cite></div><div class=\"layim-chat-text\">"+layui.layim.content(item.content)+"</div></li>")
          }else{
            lis.push("<li><div class=\"layim-chat-user\"><img lay-src=\""+item.avatar+"\"><cite>"+item.username+"<i>"+layui.data.date(item.timestamp)+"</i></cite></div><div class=\"layim-chat-text\">"+layui.layim.content(item.content)+"</div></li>")
          }
        });

        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < res.pages);

      })
    }
  });

  // 分页=============
  // instance({
  //   method: 'get',
  //   url: '/layim/chatlog' + param
  // }).then(res => {
  //   if (res.code != 0){
  //     return layer.msg(res.msg)
  //   }
  //   laypage.render({
  //     elem: 'LAY_page'
  //     ,count: res.total
  //     ,layout: ['count', 'prev',  'next', 'skip']
  //     ,jump: function(obj,first){
  //       console.log(obj);
  //       if(!first) {
  //         bindingMessage(obj.curr-1)
  //       }else{
  //         bindingMessage(0)
  //       }
  //     }
  //   });
  // })

  // function bindingMessage(page) {
  //   instance({
  //     method: 'get',
  //     url: '/layim/chatlog' + param + '&page='+page
  //   }).then(res => {
  //     if (res.code != 0){
  //       return layer.msg(res.msg)
  //     }
  //
  //     var html = laytpl(LAY_tpl.value).render({
  //       data: res.data
  //     });
  //     $('#LAY_view').html(html);
  //   })
  // }

});
</script>
</body>
</html>
